<template>
  <Card title="基础资料" :divider-margin="[24, 0, 0, 0]">
    <template #header-right>
      <tm-button
        type="primary"
        :margin="[0]"
        :round="10"
        :width="112"
        :height="48"
        :font-size="24"
        icon="ali-icon icon-edit"
        label="编辑"
        @click="handleEdit"
      ></tm-button>
    </template>
    <Cell title="头像" :show-icon="false">
      <template #right>
        <TImage
          width="48rpx"
          height="48rpx"
          :src="botCardInfo.iconFileUrl"
          error-img-type="person"
        />
      </template>
    </Cell>
    <Cell title="名称" :right-text="botCardInfo.name" :show-icon="false" />
    <Cell title="简介" :show-right-text="!botCardInfo.description" :show-icon="false">
      <template #bottom>
        <view class="hb-text-sm hb-text-[#646566]">
          {{ botCardInfo.description }}
        </view>
      </template>
    </Cell>
    <Cell
      title="身份背景"
      :show-icon="false"
      :show-right-text="!botCardInfo.socialIdentityList?.length"
    >
      <template #bottom>
        <view class="hb-flex hb-flex-wrap hb-gap-2">
          <RoleTag
            v-for="item in botCardInfo.socialIdentityList"
            :key="item"
            type="member"
            :text="item"
          />
        </view>
      </template>
    </Cell>
  </Card>
</template>

<script lang="ts" setup>
  /* 基础资料组件 */
  import Card from '../../components/Card/index.vue';
  import Cell from '../../components/Cell/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import { BotCardInfo } from '@/api/card/type';
  const props = defineProps<{
    botCardInfo: BotCardInfo;
  }>();
  const emit = defineEmits<{
    (e: 'success'): void;
  }>();
  const handleEdit = () => {
    navigateTo({
      name: 'basicInfoEdit',
      options: {
        success: () => {
          emit('success');
        },
      },
    });
  };
</script>

<style lang="scss" scoped>
  /* 使用Windi CSS，无需额外样式 */
</style>
